<!DOCTYPE html><!-- 申明网页是html -->
<html lang="zh-cn"><!-- 申明网站语言类型 -->

<head>
<meta charset="UTF-8"><!-- 申明网页文件编码格式 -->
<meta name="Generator" content="编程软件的名称：txt">
<meta name="Author" content="作者：Basil;E-mail：basilwhy@qq.com">
<meta name="Keywords" content="关键字：">
<meta name="Description" content="描述：">
<title>云木人的博客</title><!-- 网页名称 -->
<meta name="viewport" content="maximun-scale-1.0,minimun-scale-1.0,user-scalable-0,width-device-width,initial-scale-1.0"><!-- 自适应移动端 -->

<style type="text/css">
/*--------------------------------
My web css naming convention
我的网页样式命名规则
----------------------------------
格式：设备-链接-文件类型-数组
pc:电脑端的缩写
mt:手机端的缩写
tp:链接的缩写;含义是链接网页文件或图片
ob:链接的缩写;含义是链接视频文件或音频文件
btn:按钮的缩写;
menu:菜单
shop:商店
--------------------------------*/
/*--------- css样式默认配置+开始 ---------*/
	*{
	margin:0;/*-- 设置网页所有外边距为0 --*/
	padding:0;/*-- 设置网页所有内边距为0 --*/
	}
	html,body{height:100%;/*-- 设置html和body的高度为浏览器的高度 --*/}
	a{text-decoration:none;/*-- 去掉a标签的下划线 --*/}
	a:link{color:#00BBFF;/*-- 设置未访问的链接为浅蓝色 --*/}
	a:visited{color:#7700BB;/*-- 设置已访问的链接为紫色 --*/}
	a:hover{color:#FF0000;/*-- 设置鼠标移动到链接为红色 --*/}
	a:active{color:#00FF00;/*-- 设置当鼠标左键按下时,被激活的链接为浅绿色 --*/}
	li{list-style:none;/*-- 去掉li标签的黑点 --*/}
/*--------- css样式默认配置+结束 ---------*/

/*--------- PC一级导航栏+开始 ---------*/
	nav{
	width:100%;
	/*-- 设置导航栏的宽度为浏览器宽度的100% --*/
	height:9%;
	/*-- 设置导航栏的高度为浏览器宽度的9% --*/
	background:#fff;
	/*-- 设置背景颜色为白色 --*/
	border-bottom:1px solid #AAAAAA;
	/*-- 设置二级菜单的下边框为1px --*/
	}
/*--------- 华丽的分割线 ---------*/
	.mt-tp-menu,.one{
	display:none;
	/*-- 隐藏mt的菜单项 --*/
	}
	.mt-log{
	display:none;
	/*-- 隐藏mt的菜单项 --*/
	}
	.pc-log{
	font-size:3vh;
	/*-- 根据屏幕大小字体自适应 --*/
	font-weight:bold;
	/*-- 加粗文字 --*/
	color:#FF3333;
	/*-- 设置文字颜色为浅红色 --*/
	background:#fff;
	/*-- 设置背景颜色为白色 --*/
	padding:0 2rem;
	/*-- 设置左右内边距都是2rem,让文字达到水平居中的目的 --*/
	line-height:300%;
	/*-- 设置行高为300%,让文字达到垂直居中的目的*/
	float:left;
	/*-- 设置导航菜单为左浮动 --*/
	}
	.pc-tp-menu{
	font-size:2vh;
	/*-- 根据屏幕大小字体自适应 --*/
	font-weight:bold;
	/*-- 加粗文字 --*/
	color:#FF4D4D;
	/*-- 设置文字颜色为白色 --*/
	background:#fff;
	/*-- 设置背景颜色为黑色 --*/
	padding:0 2rem;
	/*-- 设置左右内边距都是2rem,让文字达到水平居中的目的 --*/
	line-height:450%;
	/*-- 设置行高为450%,让文字达到垂直居中的目的*/
	float:left;
	/*-- 设置导航菜单为左浮动 --*/
	}
/*--------- PC二级下拉菜单+开始 ---------*/
	.pc-tp-shop{
	display:block;
	/*-- 设置a标签为块元素 --*/
	display:none;
	/*-- 隐藏mt的菜单项 --*/
	width:100%;
	/*-- 设置宽度为100% --*/
	background:#fff;
	/*-- 设置背景颜色为白色 --*/
	font-size:2vh;
	/*-- 根据屏幕大小字体自适应 --*/
	font-weight:bold;
	/*-- 加粗文字 --*/
	text-align:center;
	/*-- 设置文字左右居中显示 --*/
	line-height:150%;
	/*-- 设置行高为150%,让文字达到垂直居中的目的*/
	border-bottom:1px solid #AAAAAA;
	/*-- 设置二级菜单的下边框为1px --*/
	}
	.pc-tp-menu:hover .pc-tp-shop{display:block;
	/*-- 设置鼠标放上去显示被隐藏的二级菜单 --*/}
/*--------- PC二级下拉菜单+结束 ---------*/

/*--------- 在移动端隐藏菜单项，并显示切换按钮 ---------*/
	@media (max-width:1000px) {
/*--------- mt菜单项前置内容+开始 ---------*/
	.pc-tp-menu{
	display:none;
	/*-- 隐藏pc的一级导航栏 --*/
	}
	.mt-log{
	display:block;
	/*-- 显示被隐藏mt的log --*/
	display:block;
	/*-- 设置a标签为块元素 --*/
	background:#fff;
	/*-- 设置背景颜色为白色 --*/
	float:left;
	/*-- 设置左浮动 --*/
	padding:0 2rem;
	/*-- 设置左右内边距都是2rem,让文字达到水平居中的目的 --*/
	}
/*--------- mt菜单项前置内容+结束 ---------*/

/*--------- mt一级导航栏+开始 ---------*/
	.pc-log{
	width:100%;
	/*-- 设置宽度为100% --*/
	height:100%;
	/*--  设置高度为nav的100% --*/
	padding:0;
	/*-- 设置内边距为0 --*/
	background:#fff;
	/*-- 设置背景颜色为白色 --*/
	/*white-space:nowrap;
	-- 禁止自动换行 --*/
	text-align:center;
	/*-- 设置文字左右居中显示 --*/
	}
	.mt-tp-menu{
	display:block;
	/*-- 设置a标签为块元素 --*/
	display:none;
	/*-- 隐藏mt的菜单项 --*/
	width:100%;
	/*-- 设置宽度为100% --*/
	background:green;
	/*-- 设置背景颜色为白色 --*/
	font-size:3vh;
	/*-- 根据屏幕大小字体自适应 --*/
	text-align:center;
	/*-- 设置文字左右居中显示 --*/
	line-height:150%;
	/*-- 设置行高为150%,让文字达到垂直居中的目的*/
	border-bottom:1px solid #AAAAAA;
	/*-- 设置二级菜单的下边框为1px --*/
	}
	.pc-log:hover .mt-tp-menu{display:block;
	/*-- 设置鼠标放上去显示被隐藏的二级菜单 --*/
	}
/*--------- mt一级导航栏+结束 ---------*/

/*--------- mt二级下拉菜单+开始 ---------*/
	.mt-tp-menu-shop{
	display:block;
	/*-- 设置a标签为块元素 --*/
	width:100%;
	/*-- 设置宽度为100% --*/
	background:#fff;
	/*-- 设置背景色为白色 --*/
	display:none;
	/*-- 隐藏mt二级下拉菜单 --*/
	border-bottom:1px solid #AAAAAA;
	/*-- 设置二级菜单的下边框为1px --*/
	}
	.mt-tp-menu:hover .mt-tp-menu-shop{display:block;
	/*&nbsp;-- 设置鼠标放上去显示被隐藏的二级菜单 --*/
	}
/*--------- mt二级导下拉菜单+结束 ---------*/
</style>
</head>

<body>
	<nav>
<!--------- mt一级导航栏+开始 --------->
		<p class="pc-log">
		<span class="mt-log">▼</span>
		云木人
		<a href="#" class="mt-tp-menu">首页</a>
		<!--------- mt二级下拉菜单+开始 --------->
		<span class="mt-tp-menu">商店▼
		<a href="#" class="mt-tp-menu-shop">淘宝店铺</a>
		<a href="#" class="mt-tp-menu-shop">微信店铺</a>
		</span>
		<!--------- mt二级下拉菜单+结束 --------->
		<a href="#" class="mt-tp-menu">关于</a>
		<a href="#" class="mt-tp-menu">联系</a>
		</p>
<!--------- mt一级导航栏+结束 --------->

<!--------- pc一级导航栏+开始 --------->
		<p class="pc-tp-menu">
		<a href="#">首页</a>
		</p>
		<!--------- pc一二级导航菜单+开始 --------->
		<p class="pc-tp-menu" >
		<span>商店▼</span>
		<a href="#" class="pc-tp-shop">淘宝店铺</a>
		<a href="#" class="pc-tp-shop">微信店铺</a>
		</p>
		<!--------- pc一二级导航菜单+结束 --------->
		<p class="pc-tp-menu">
		<a href="#">关于</a>
		</p>

		<p class="pc-tp-menu">
		<a href="#">联系</a>
		</p>
<!--------- pc一级导航栏+结束 --------->
	</nav>
</body>
</html>